<template>
    <div class="login-wrapper">
        <img src="@/assets/image/bg1.png" alt="" class="bg_img">

        <div class="login_view">
            <div class="title">{{ $t('login.忘记密码') }}</div>

            <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-width="0px" class="login_form">
                <el-form-item prop="account" class="input">
                    <el-input ref="account" v-model="loginForm.account" type="text" auto-complete="off"
                        :placeholder="$t('placeholder.请输入账号')" />
                </el-form-item>

                <el-form-item prop="code" class="input">
                    <el-input v-model="loginForm.code" type="text" auto-complete="off"
                        :placeholder="$t('placeholder.请输入验证码')">
                        <div slot="suffix" class="slot_code">
                            <img :src="code_url" class="code" @click="code_click">
                        </div>
                    </el-input>
                </el-form-item>

                <el-form-item prop="email" class="input">
                    <el-input v-model="loginForm.email" type="text" auto-complete="off"
                        :placeholder="$t('placeholder.请输入邮箱')" />
                </el-form-item>

                <el-form-item prop="emailcode" class="input">
                    <el-input v-model="loginForm.emailcode" type="text" auto-complete="off"
                        :placeholder="$t('placeholder.请输入邮箱验证码')">
                        <div slot="suffix" class="slot_code">
                            <el-button type="success" @click="getCode">
                                {{ countdown > 0 ? `${countdown}S` : $t('login.获取验证码') }}
                            </el-button>
                        </div>
                    </el-input>
                </el-form-item>

                <el-form-item prop="password" class="input">
                    <el-input v-model="loginForm.password" type="password" show-password auto-complete="off"
                        :placeholder="$t('placeholder.请输入密码')" />
                </el-form-item>
                <el-form-item prop="passwords" class="input">
                    <el-input v-model="loginForm.passwords" type="password" show-password auto-complete="off"
                        :placeholder="$t('placeholder.请确认密码')" />
                </el-form-item>

                <el-form-item class="login_item">
                    <el-button type="primary" @click.native.prevent="submit" class="login_btn">
                        {{ $t('login.立即修改') }}
                    </el-button>
                </el-form-item>

                <el-form-item>
                    <div class="footer">
                        <div class="no_account"> {{ $t('login.想起密码了') }}？</div>
                        <div class="go_register" @click="$router.replace({ path: '/login' })">{{ $t('login.登录') }}</div>
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        var passwords = (rule, value, callback) => {
            if (value === '') {
                callback(new Error(this.$t('placeholder.请确认密码')));
            } else if (value !== this.loginForm.password) {
                callback(new Error(this.$t('placeholder.两次输入密码不一致')));
            } else {
                callback();
            }
        };
        return {
            code_url: "",

            countdown: 0, // 倒计时秒数，0表示未开始倒计时
            countdownTimer: null, // 倒计时定时器


            loginForm: {
                account: "",
                code: "",
                email: "",
                emailcode: "",

                password: "",
                passwords: "",

            },
            loginRules: {
                account: [
                    { required: true, trigger: "blur", message: this.$t('placeholder.用户名不能为空') },
                ],
                code: [
                    { required: true, trigger: "blur", message: this.$t('placeholder.请输入验证码') },
                ],

                email: [
                    { required: true, trigger: "blur", message: this.$t('placeholder.邮箱不能为空') },
                ],
                emailcode: [
                    { required: true, trigger: "blur", message: this.$t('placeholder.请输入邮箱验证码') },
                ],
                password: [
                    { required: true, trigger: "blur", message: this.$t('placeholder.密码不能为空') },
                ],
                passwords: [{ validator: passwords, trigger: 'blur' }]
            }
        };
    },
    created() {
        this.code_click();
    },
    beforeDestroy() {
        // 组件销毁前清除定时器，防止内存泄漏
        if (this.countdownTimer) {
            clearInterval(this.countdownTimer);
            this.countdownTimer = null;
        }
    },
    methods: {
        async code_click() {
            let data = await this.$api.usersApi.captcha();
            this.code_url = data.image;
        },
        async getCode() {
            // 如果正在倒计时，提示用户
            if (this.countdown > 0) {
                this.$message({
                    message: this.$t('login.倒计时结束后再发送'),
                    type: 'warning'
                });
                return;
            }

            // 验证邮箱是否填写
            if (this.loginForm.email == '') {
                this.$message({
                    message: this.$t('placeholder.请输入邮箱'),
                    type: 'warning'
                });
                return;
            }

            try {
                // 发送验证码请求
                await this.$api.usersApi.send({
                    email: this.loginForm.email,
                    event: "resetpwd"
                });

                // 显示成功提示
                this.$message({
                    message: this.$t('login.验证码已发送'),
                    type: 'success'
                });

                // 开始倒计时，设置为60秒
                this.countdown = 60;

                // 启动定时器，每秒减1
                this.countdownTimer = setInterval(() => {
                    this.countdown--;
                    // 倒计时结束，清除定时器
                    if (this.countdown <= 0) {
                        clearInterval(this.countdownTimer);
                        this.countdownTimer = null;
                        this.countdown = 0;
                    }
                }, 1000);
            } catch (error) {
                // 如果发送失败，不启动倒计时
                console.error('发送验证码失败:', error);
            }
        },
        submit() {
            this.$refs.loginForm.validate(async (valid) => {
                if (!valid) return;

                let data = this.loginForm;
                data = {
                    account: data.account,
                    captcha: data.code,
                    newpassword: data.password
                };
                await this.$api.usersApi.resetpwd(data);
                this.$message({
                    message: this.$t('mall.修改成功'),
                    type: 'success'
                });
                this.$router.back();
            })
        }
    }
};
</script>

<style lang="scss">
.login-wrapper {
    width: 100%;
    height: 100vh;

    .bg_img {
        float: left;
        width: calc(100% - 742px);
        height: 100%;
    }

    .login_view {
        float: right;
        width: 742px;
        height: 100vh;
        padding: 0 130px;
        box-sizing: border-box;
        background: linear-gradient(323deg, #B9D6FF 0%, #FFFFFF 86%);
        box-shadow: 0px 15px 30px 0px rgba(0, 0, 0, 0.08);
        display: flex;
        flex-direction: column;
        justify-content: center;

        .title {
            font-weight: bold;
            font-size: 32px;
            color: #333333;
            margin-bottom: 48px;
        }

        .login_form {
            .input {
                height: 62px;

                input {
                    height: 62px;
                    border-radius: 12px;
                    padding: 0 16px;
                    box-sizing: border-box;
                }

                .slot_code {
                    height: 100%;
                    padding: 0 16px;
                    box-sizing: border-box;
                    display: flex;
                    align-items: center;

                    img {
                        width: 78px;
                        height: 28px;
                    }
                }
            }

            .login_item {
                margin-top: 64px;

                .login_btn {
                    width: 100%;
                    height: 62px;
                    font-weight: 400;
                    font-size: 18px;
                    color: #FFFFFF;
                    background: #2273FF;
                    border-radius: 12px 12px 12px 12px;
                }
            }
        }

        .footer {
            display: flex;
            justify-content: center;
            font-size: 14px;

            .no_account {
                color: #333333;
            }

            .go_register {
                color: #2273FF;
                cursor: pointer;
            }
        }
    }
}
</style>
